<template>
  <a-modal
    v-model:visible="visible"
    @close="closeModal"
    modal-class="my-dashboard-delete-modal"
  >
    <template #title></template>
    <div class="delete-modal-title">{{ props.deleteTilte }}</div>
    <div class="delete-modal-tip">
      {{ props.deleteSubTilte }}
    </div>
    <template #footer>
      <a-button @click="visible = false">取消</a-button>
      <a-button @click="confirmDelete" type="primary" status="danger">
        确定删除
      </a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    deleteTilte?: string;
    deleteSubTilte?: string;
  }>(),
  {
    modelValue: false,
    deleteTilte: '是否确认删除？',
    deleteSubTilte: ''
  }
);
const emits = defineEmits(['update:modelValue', 'delete']);

const visible = ref(false);
const confirmDelete = () => {
  emits('delete');
};
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);
// 关闭弹窗
const closeModal = () => {
  emits('update:modelValue', false);
};
</script>
<style lang="scss">
.my-dashboard-delete-modal {
  width: 320px;
  min-height: 140px;
  .arco-modal-header {
    border-bottom: none;
  }

  .arco-modal-body {
    margin-top: -15px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .arco-modal-footer {
    border-top: none;
  }

  .delete-modal-title {
    color: var(--color-text-1);
    font-size: 16px;
    line-height: 24px;
  }

  .delete-modal-tip {
    color: var(--color-text-3);
    font-size: 12px;
    line-height: 20px;
    height: 20px;
  }
}
</style>
